import { CommandDialog } from '@amcax/base';
import {
  CommandFormProps,
  NonDialogCommandForm,
} from '@app-base/common/components/command-form';
import { i18n } from '@app-nextmesh/common/utils';
import {
  ColorPickerWidget,
  EntityField,
} from '@app-nextmesh/components/Widgets';
import { RegistryFieldsType, RegistryWidgetsType } from '@rjsf/utils';
import { customizeValidator, Localizer } from '@rjsf/validator-ajv8';
import styled from 'styled-components';

const customizeFields: RegistryFieldsType = {
  entity: EntityField,
};
const customizeWidgets: RegistryWidgetsType = {
  colorPicker: ColorPickerWidget,
};

const StyledCommandDialog = styled(CommandDialog)`
  & .rjsf > .command-form {
    width: auto !important;
    padding: 20px;
    padding-bottom: 8px;
  }
`;

const getMessage = (
  defaultMsg: string,
  keyword: string,
  param: Record<string, any>,
) => {
  const key = `validation.${keyword}`;
  const msg = i18n.t(key, param);
  return msg === key ? defaultMsg : msg.toString();
};

const localizer: Localizer = (errors) => {
  errors?.forEach((e) => {
    if (!e || !e.keyword || !e.message) {
      return;
    }
    let keyword = e.keyword;
    switch (keyword) {
      case 'required':
        e.message = getMessage(e.message, keyword, e.params);
        break;
      case 'type':
        // e.message = '必须是 数字';
        // e.stack = ''尺寸' 必须是 数字';
        e.message = getMessage(e.message, keyword, {
          type: i18n.t(e.params?.type),
        });
        break;
      case 'exclusiveMinimum':
        e.message = getMessage(e.message, keyword, e.params);
        break;
      case 'minItems':
        // 选取的是实体，特殊处理一下
        if (e.schemaPath?.includes('SelectedEntities')) {
          keyword = 'entityMinItems';
        }
        e.message = getMessage(e.message, keyword, e.params);
        break;
      case 'maxItems':
        // 选取的是实体，特殊处理一下
        if (e.schemaPath?.includes('SelectedEntities')) {
          keyword = 'entityMaxItems';
        }
        e.message = getMessage(e.message, keyword, e.params);
        break;
      case 'pattern':
        e.message = getMessage(e.message, keyword, {
          pattern: i18n.t(e.params?.pattern),
        });
        break;
    }
    return;
  });
};

// 自定义校验，对错误信息进行i18n
const validator = customizeValidator(undefined, localizer);

const CommandDialog2 = ({
  title,
  onClose,
  onChange,
  placement,
  widgets,
  fields,
  className,
  ...rest
}: CommandFormProps) => {
  return (
    <>
      <StyledCommandDialog
        title={title}
        onClose={onClose}
        className={className === undefined ? 'w-[320px]' : className}
        placement={placement ?? 'topLeft'}>
        <NonDialogCommandForm
          fields={{ ...fields, ...customizeFields }}
          widgets={{ ...widgets, ...customizeWidgets }}
          noValidate={false}
          showErrorList={false}
          validator={validator}
          onChange={onChange}
          onCancel={onClose}
          {...rest}
        />
      </StyledCommandDialog>
    </>
  );
};

const CommandDialog2Footer = ({ children }: { children: React.ReactNode }) => {
  return <div className='form-dialog_footer'>{children}</div>;
};
export { CommandDialog2, CommandDialog2Footer };
